<script setup lang="ts">
import {onMounted, ref} from "vue";
import {query,editStatus,deleteById} from "@/api/permission/role"
import {Delete, Edit} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import SaveRole from "./SaveRole.vue"
import EditRole from "./EditRole.vue"

const tableData = ref()
const isShow=ref(false)
const RoleIsShow = ref(false)
//初始化数据
async function initDate(){
  let rs = await query()
  if (rs.code==200){
    tableData.value=rs.data
  }
}
//修改角色状态
async function changeStatus(row){
  let rs = await editStatus(row)
  if(rs.code==200){
    ElMessage({
      message: '修改成功',
      type: 'success'
    })
  }
}
//删除角色
async function deleteRole(id){
  let rs = await deleteById(id)
  if (rs.code==200){
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    initDate()
  }
}
//编辑角色
const updateRef = ref()
function update(row){
  RoleIsShow.value = true;
  updateRef.value.init(row)
}
onMounted(()=>{
  initDate();
})
</script>

<template>
  <div>
    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px">角色列表</span>
      <!--工具条-->
      <div class="toolbar">
        <el-button type="primary" size="small" style="background-color: #60BFAE;border: #60BFAE" @click="isShow=true">新增角色</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :indent="20"
    >
      <el-table-column type="index" prop="date" label="序号" align="center" header-align="center" width="80"/>
      <el-table-column prop="code" label="角色编码" align="center" header-align="center"/>
      <el-table-column prop="name" label="角色名称" align="center" header-align="center"/>
      <el-table-column prop="note" label="角色描述" align="center" header-align="center"/>
      <el-table-column prop="status" label="角色状态" align="center" header-align="center">
        <template v-slot="{row}">
          <el-switch
            v-model="row.status"
            class="ml-2"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            :active-value="1"
            :inactive-value="0"
            inline-prompt
            size="large"
            active-text="启用"
            inactive-text="禁用"
            @change="changeStatus(row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" header-align="center">
        <template v-slot="{row}">
        <el-button type="primary" :icon="Edit" circle @click="update(row)"/>
        <el-popconfirm title="确定要删除该菜单吗？" @confirm="deleteRole(row.id)">
          <template #reference>
            <el-button type="danger" :icon="Delete" circle/>
          </template>
        </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <SaveRole :visible="isShow" @close="isShow = false" @refresh="initDate"></SaveRole>
    <EditRole :visible="RoleIsShow" @close="RoleIsShow=false" @refresh="initDate" ref="updateRef"></EditRole>
  </div>
</template>

<style scoped lang="scss">
.toolbar {
  float: right;
}
</style>
